<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="#{layoutMB.template}">
    <f:loadBundle var="msg" basename="admin"/>

    <ui:define name="metadata">
        <!-- Automatic create breadCrumb and page title when param 'title' is provided. -->
        <ui:param name="title" value="#{msg['car.list']}"/>
        <style type="text/css">
            .ui-datatable .ui-datatable-header {
                text-align: right !important;
            }
        </style>
    </ui:define>

    <ui:define name="description">
        Find cars by name, price and model
    </ui:define>

    <ui:define name="body">
        <h:form>
            <div class="box box-primary">
                <div class="box-header with-border">
                    <div id="main-buttons" class="hidden-sm hidden-xs">
                        <p:commandButton action="/car/car-form?faces-redirect=true" icon="fa fa-plus"
                                         value="#{msg['button.new']}" styleClass="btn-primary"/>
                        <p:spacer width="5"/>
                        <p:commandButton value="#{msg['button.delete']}" icon="fa fa-trash" styleClass="btn-danger"
                                         action="#{carListController.delete()}" update="@form">
                            <p:confirm header="Confirmation" message="#{msg['dialog.delete.confirm']}"
                                       icon="ui-icon-danger"/>
                        </p:commandButton>
                        <p:spacer width="5"/>
                        <p:commandButton value="#{msg['button.view']}" update="@(.ui-dialog)" styleClass="btn-info"
                                         oncomplete="PF('selectedCars').show()" icon="fa fa-search"/>
                    </div>

                    <p:splitButton value="#{msg['button.new']}" action="/car/car-form?faces-redirect=true"
                                   icon="fa fa-plus" styleClass="hidden-md hidden-lg btn-primary">
                        <p:menuitem value="#{msg['button.delete']}" action="#{carListController.delete}" update="@form"
                                    icon="fa fa-trash">
                            <p:confirm header="Confirmation" message="#{msg['dialog.delete.confirm']}"
                                       icon="ui-icon-danger"/>
                        </p:menuitem>
                        <p:menuitem value="#{msg['button.view']}" update="@(.ui-dialog)"
                                    oncomplete="PF('selectedCars').show()"
                                    icon="fa fa-search"/>
                    </p:splitButton>

                    <p:separator/>
                    <!--@elvariable id="c" type="xyz.robinbingo.pfboot.entity.Car"-->
                    <p:dataTable var="c" value="#{carListController.cars}" rows="10"
                                 rowKey="#{c.id}" lazy="true" paginator="true"
                                 paginatorPosition="bottom" selection="#{carListController.selectedCars}"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks}
                                 {NextPageLink} {LastPageLink} {JumpToPageDropdown} {RowsPerPageDropdown}"
                                 currentPageReportTemplate="[ {startRecord} - {endRecord} / {totalRecords} ]"
                                 rowsPerPageTemplate="5,10,15,20,50">

                        <p:column selectionMode="multiple" width="5%" styleClass="align-center"/>
                        <p:column headerText="Model" filterBy="#{c.model}" sortBy="#{c.model}">
                            <p:link value="#{c.model}" outcome="/car/car-form">
                                <f:param name="id" value="#{c.id}"/>
                            </p:link>
                        </p:column>
                        <p:column headerText="Name" sortBy="#{c.name}" filterBy="#{c.name}">
                            <h:outputText value="#{c.name}"/>
                        </p:column>
                        <p:column headerText="Price" sortBy="#{c.price}" filterBy="#{c.price}">
                            <h:outputText value="#{c.price}"/>
                        </p:column>
                    </p:dataTable>
                </div>
            </div>

            <ui:include src="/includes/confirm-dialog.xhtml"/>
        </h:form>

        <p:dialog header="#{msg['car.selected']}" widgetVar="selectedCars" responsive="true" styleClass="box-success">
            <p:dataList id="selectedCarsList" value="#{carListController.selectedCars}" var="car" type="definition">
                ID: #{car.id} - Name: #{car.name} - Model: #{car.model}
            </p:dataList>
        </p:dialog>

    </ui:define>

</ui:composition>
